<script setup>

  import { computed, reactive, ref, unref } from 'vue';

  import {
    onReachBottom, onLoad, onReady,
  } from '@dcloudio/uni-app';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';
  import SpuApi from '@/sheep/api/product/spu';
  import { style } from '@/uni_modules/uview-plus/libs/mixin/style';
  import { fen2yuan } from '../../sheep/hooks/useGoods';

  const props = defineProps({
    tp: String,
  });
  console.log('tp=' + props.tp); // id=10
  // 隐藏原生tabBar
  uni.hideTabBar();

  const template = computed(() => sheep.$store('app').template?.home);
  const setting = computed(() => sheep.$store('category').album);

  const state = reactive({
    showModal: false,
    bottomListActive: 0,
    searchParam: {},
    tp: props.tp,
    album: setting.value.default,
    hotList: setting.value.hotList,
    albumList: [],
    pointDataList: [],
  });


  onReady(async () => {
    console.log(state);
    const { code: pointCode, data: pointData } = await SpuApi.getPointList({
      pageNo: 1,
      pageSize: 20,
      name: state.tp,
    });
    console.log('pointData', pointData);
    if (pointCode === 0) {
      state.pointDataList = pointData.list;
    }

    const { code, data } = await SpuApi.getHotList({
      names: state.hotList.map(item => item.name).join(','),
    });
    if (code === 0) {
      state.albumList = data.map(item => {
        const hot = state.hotList.find(hot => hot.name === item.name);
        Object.assign(item, hot);
        return item;
      });
    }
  });

  const albumListFilter = computed(() => {
    return state.albumList.filter(item => item.name !== state.tp);
  });
  const album = computed(() => {
    if (state.tp) {
      return state.albumList.find(item => item.name === state.tp);
    }
    return state.album;
  });
  const pageStyle = computed(() => {
    const styles = unref(album);
    if (style) {
      return {
        'description': '',
        'backgroundColor': style.bgColor,
        'backgroundImage': '',
      };
    } else {
      return {
        'description': '',
        'backgroundColor': '#f5f5f5',
        'backgroundImage': '',
      };
    }

  });

  // #ifdef H5
  const navbar = 'none';
  // #endif
  // #ifdef MP
  const navbar = 'custom';
  // #endif
  onReachBottom(() => {
    console.log('到底了');
    uni.$emit('onReachBottom');
  });
</script>
<template>
  <s-layout title="首页" :navbar="navbar" tabbar="/pages/index/ranking" :bgStyle="pageStyle"
            :navbarStyle="template.navigationBar" onShareAppMessage>
    <up-image :show-loading="true" :src="album&&album.detailImgUrl" width="100%" height="280px"></up-image>

    <view class="uno-p-2 uno-box-border" :style="{
      padding: '40rpx',background: album.bgColor
    }">

      <up-grid
        :border="false"
        col="1"
        gap="20rpx"
      >
        <up-grid-item
          v-for="(listItem,listIndex) in state.pointDataList"
          :key="listIndex"
          @click="sheep.$router.go('/pages/goods/index',{id:listItem.id})"

        >
          <view class="uno-w-[100%] uno-flex  uno-bg-white uno-p2 uno-border-rd-lg ">
            <up-image :src="listItem.picUrl" width="200rpx"
                      height="200rpx"></up-image>
            <view class="uno-ml2 uno-flex uno-flex-col uno-flex-grow">
              <view>
                <up-text size="30rpx" :text="listItem.name" :lines="1"></up-text>
              </view>
              <view class="uno-flex uno-color-red  uno-mt2">
                <view class="uno-flex">
                  <text>{{ listItem.points }}积分</text>
                </view>
<!--                <text>+{{ fen2yuan( listItem.price )}}元</text>-->
              </view>
              <view class="uno-flex uno-justify-end uno-items-end">
                <view
                  class="uno-color-white uno-bg-red uno-w-100 uno-pl2 uno-pr2 uno-p1 uno-border-rd-lg uno-flex uno-justify-center uno-items-center">
                  去兑换
                </view>
              </view>
              <view class="uno-flex uno-justify-between uno-items-center uno-mt2" style="font-size: 20rpx;">
                <view style="text-decoration: line-through">原价￥{{ fen2yuan( listItem.marketPrice )}}</view>
                <view>仅剩
                  <text class="uno-color-red">{{ listItem.stock }}</text>
                  件
                </view>
              </view>
            </view>

          </view>
        </up-grid-item>
      </up-grid>
    </view>
    <view class="uno-p-2 uno-flex uno-flex-col ">
      <view class="likeing uno-color-red uno-flex uno-flex-justify-center uno-items-center uno-mt-10">
        <view class="line line-left uno-w-150 uno-h-2  "></view>
        <view class="like uno-font-size-5">专题推荐</view>
        <view class="line line-right uno-w-150 uno-h-2  "></view>
      </view>


      <view v-for="item in albumListFilter">
        <view class="uno-border-rd-lg uno-overflow-hidden uno-mt4">
          <up-image :src="item.imgUrl" width="100%" @click="sheep.$router.go('/pages/index/albumDetail',{tp:item.name})"
                    height="200rpx"></up-image>
        </view>

      </view>
    </view>


  </s-layout>
</template>

<style scoped lang="scss">
  :deep(.page-body) {
    //background: #efddcf !important;
  }

  $dark-red-more: #ff1c24;
  .likeing {
    color: $dark-red-more;

    .like {
      font-size: 40rpx;
      font-weight: bold;
      margin: 0 50rpx;
    }

    .line {
      position: relative;
      background-color: $dark-red-more;

      &::after {
        content: '';
        position: absolute;
        width: 20rpx;
        height: 20rpx;
        border-radius: 50%;
        background-color: $dark-red-more;

      }

      &-left::after {
        left: 100%;
        top: 0;
        transform: translateY(-50%) translateX(-50%);
      }

      &-right::after {
        right: 100%;
        top: 0;
        transform: translateY(-50%);;
      }
    }

  }
</style>